<template>
  <div class="orderList">
    <div class="orderList_top">
      <van-search show-action class="search-input" placeholder="请输入商品名称，搜索订单">
        <template #action>
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="orderList_content">
      <van-tabs v-model:active="active" swipeable @change="tabsChange">
        <van-tab v-for="tab in tabsData" :title="tab">
          <div class="goods-card" v-for="item in 2">
            <div class="goods-card-top">
              <div>2025-03-31 11:35:25</div>
              <div>待收货|删除</div>
            </div>
            <div class="goods-card-content">
              <div class="goods-card-content-img">
                <img style="width: 80px; height: 80px;" src="../../assets/order/mike.png" alt="">
              </div>
              <div class="goods-card-content-text">
                <div class="goods-card-content-text-top">
                  <div class="text-content">3件装|MEDIHEAL 美迪惠尔 N.M.F针剂水库保湿面霜 10片/盒 </div>
                  <div class="text-price">
                    <div>￥ 169.00</div>
                    <div style="font-size: 12px;">x 2</div>
                  </div>
                </div>
                <div class="goods-card-content-text-bottom">
                  <div class="bottom-support">支持15天无理由</div>
                  <div class="bottom-price">
                    共计2件，应付金额：<span style="color: #e82050;font-weight: 700;">￥338.00</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-card-bottom">
              <div class="card-btn">申请售后</div>
              <div class="card-btn">核销码</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div style="height: 20px;"></div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const active = ref(Number(route.query.status) || 0)
const tabsData = ref(['全部订单', '待付款', '待发货', '待收货', '待提货', '已完成'])
function tabsChange(name, title) {
  console.log('tabs切换', name, title);
}

function back() {
  router.back()
}
</script>

<style lang="scss" scoped>
.orderList {
  display: flex;
  flex-direction: column;

  .orderList_top {
    position: relative;
    height: 54px;
  }

  .orderList_content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 启用惯性滚动 */
    margin: 0 10px;
    background: transparent !important;
  }
}

.goods-card {
  margin: 10px 0;
  background-color: #fff;
  border-radius: 10px;
  margin: 10px 5px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  padding: 10px;

  .goods-card-top {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }

  .goods-card-content {
    display: flex;
    margin-top: 20px;

    .goods-card-content-img {
      margin-right: 20px;
    }

    .goods-card-content-text {
      .goods-card-content-text-top {
        display: flex;
        font-size: 14px;
        gap: 10px;

        .text-content {
          flex: 1;
        }

        .text-price {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          color: #333;
        }
      }

      .goods-card-content-text-bottom {
        color: #333;
        font-size: 12px;

        .bottom-support {
          padding: 5px 0;
        }

        .bottom-price {
          display: flex;
          justify-content: flex-end;
          padding: 10px 0;
        }
      }

    }
  }

  .goods-card-bottom {
    display: flex;
    justify-content: flex-end;

    .card-btn {
      padding: 5px 15px;
      border: 1px solid #ccc;
      border-radius: 100px;
      font-size: 12px;
      color: #333;
      margin-left: 10px;
    }
  }
}

.delete-button {
  height: 100%;
}

:deep(.van-search) {
  background: transparent;
  margin: 0 15px;
  padding: 10px 0;
}

:deep(.van-search__content) {
  border-radius: 100px !important;
  background-color: #fff;
  border: 1px solid #d0cdc9;
}

:deep(.van-search__action) {
  position: absolute;
  right: 25px;
  color: #3fccdf;
}

:deep(.van-tabs__nav) {
  background: transparent;
}

:deep(.van-tab--active) {
  color: #3fccdf !important;
}

:deep(.van-tabs__line) {
  background: #3fccdf;
}
</style>